// 数据渲染
var rel1 = '';
// 热门推荐的数据
data.applianceData.hot.forEach(function(item) {
    // ./details.html#${item.goodid}applianceData/hot  网页的名字加上渲染的id再加上渲染的地方
    rel1 += `
        <li>
            <a href="./details.html#${item.goodid}applianceData/hot"><img src="${item.goodurls.nowurl}" alt=""></a>
            <p class="app-price">￥${item.goodzprice}</p>
            <p class="app-title"><a href="javascript:;">${item.goodtitle}</a>
            </p>
            <p class="app-red"><a href="javascript:;">查看详情</a></p>
        </li>
        `;
});
$('.app-hot-bot ul').html(rel1);

function showData(data, arg1, ele) {
    $(ele).html('');
    var rels = '';
    data.forEach(function(item, i) {
        if (i === 0) {
            rels += `
            <li class="kitchen-first">
            
                <a href="./details.html#${item.goodid}applianceData/${arg1}">
                    <img src="${item.goodurls.nowurl}" alt="">
                    <div class="kitchen-first-bot">
                        <a href="javascript:;">${item.goodtitle}</a>
                        <div class="app-info-handle">
                            <span class="app-num">￥${item.goodzprice}</span>
                            <a href="./details.html#${item.goodid}applianceData/${arg1}">查看详情</a>
                        </div>
                    </div>
                </a>
            </li>
            `;
        } else {
            rels += `
            <li>
                <a href="./details.html#${item.goodid}applianceData/${arg1}">
                    <div class="app-p-img">
                        <img src="${item.goodurls.nowurl}" alt="">
                    </div>
                    <div class="app-p-name">${item.goodtitle}</div>
                    <div class="app-p-price">￥${item.goodzprice}</div>
                </a>
            </li>`;
        }

    });
    $(ele).html(rels);
}
// 厨房
showData(data.applianceData.cookhouse, 'cookhouse', '.kitchen-bot-right-con-one .kitchen-show');
// 大家电
showData(data.applianceData.big, 'big', '.kitchen-bot-right-con-two .kitchen-show');
// 个人健康
showData(data.applianceData.person, 'person', '.kitchen-bot-right-con-three .kitchen-show');
// 五金家装
showData(data.applianceData.five, 'five', '.kitchen-bot-right-con-four .kitchen-show');
// 生活电器
showData(data.applianceData.life, 'life', '.kitchen-bot-right-con-five .kitchen-show');



// 随手购渲染
var relfoot = '';
data.applianceData.suibian.forEach(function(item) {
    relfoot +=
        `
            <li>
                <div class="app-tempWrap-img">
                <a href="./details.html#${item.goodid}applianceData/suibian">
                    <img src="${item.goodurls.nowurl}" alt="">
                </a>
                </div>
                <div class="app-tempWrap-price">￥${item.goodzprice}</div>
                <div class="app-tempWrap-name">
                    <a href="./details.html#${item.goodid}applianceData/suibian"">${item.goodtitle}</a>
                </div>
                <div class="app-tempWrap-btn">
                    <a href="./details.html#${item.goodid}applianceData/suibian"">查看详情</a>
                </div>
            </li>

    `
})
$(".app-tempWrap ul").html(relfoot)

// 轮播
// 小圆点
// 获取小圆点元素
var appSpan = document.querySelectorAll(".app-lun-span>span")
    // 图片元素
var appLi = document.querySelectorAll(".app-lun-one>ul>li");
// console.log(appLi[0]);
var appFlag = 1;
// interId全局变量
var interId = null;
for (var i = 0; i < appSpan.length; i++) {
    appSpan[i].index = i;
    appSpan[i].onmouseenter = function() {
        clearInterval(interId);
        // 排他
        for (var j = 0; j < appSpan.length; j++) {
            appSpan[j].className = ""
            appLi[j].className = ""
        }
        this.className = "app-on";
        appLi[this.index].className = "app-lun-show"
        appFlag = this.index + 1
    }
    appSpan[i].onmouseleave = function() {
        appShow();
    }
}


function appShow() {
    // 添加定时器
    interId = setInterval(function() {
        if (appFlag == appLi.length) {
            appFlag = 0;
        }
        for (let i = 0; i < appLi.length; i++) {
            appSpan[i].className = ""
            appLi[i].className = ""

        }
        appSpan[appFlag].className = "app-on"
        appLi[appFlag].className = "app-lun-show"
        appFlag++;
    }, 3000)
}
appShow();


// tab栏
$(".app-kitchen-top-right-one li").click(function() {
        var index = $(this).index();
        console.log(index);
        // console.log($(this).addClass('on'));
        $(this).addClass("on").siblings().removeClass("on")
            // console.log($(".kitchen-bot-right-con>ul").eq(index).show().siblings(".kitchen-bot-right-con>ul").hide());

        $(".kitchen-bot-right-con-one>ul").eq(index).addClass("kitchen-show").siblings("ul").removeClass("kitchen-show")
    })
    // tab栏
$(".kitchen-top-right-two li").click(function() {
        var index = $(this).index();
        console.log(index);
        // console.log($(this).addClass('on'));
        $(this).addClass("on").siblings().removeClass("on")
            // console.log($(".kitchen-bot-right-con>ul").eq(index).show().siblings(".kitchen-bot-right-con>ul").hide());

        $(".kitchen-bot-right-con-two>ul").eq(index).addClass("kitchen-show").siblings("ul").removeClass("kitchen-show")
    })
    // tab栏
$(".kitchen-top-right-three li").click(function() {
        var index = $(this).index();
        console.log(index);
        // console.log($(this).addClass('on'));
        $(this).addClass("on").siblings().removeClass("on")
            // console.log($(".kitchen-bot-right-con>ul").eq(index).show().siblings(".kitchen-bot-right-con>ul").hide());

        $(".kitchen-bot-right-con-three>ul").eq(index).addClass("kitchen-show").siblings("ul").removeClass("kitchen-show")
    })
    // tab栏
$(".kitchen-top-right-four li").click(function() {
        var index = $(this).index();
        console.log(index);
        // console.log($(this).addClass('on'));
        $(this).addClass("on").siblings().removeClass("on")
            // console.log($(".kitchen-bot-right-con>ul").eq(index).show().siblings(".kitchen-bot-right-con>ul").hide());

        $(".kitchen-bot-right-con-four>ul").eq(index).addClass("kitchen-show").siblings("ul").removeClass("kitchen-show")
    })
    // tab栏
$(".kitchen-top-right-five li").click(function() {
        var index = $(this).index();
        console.log(index);
        // console.log($(this).addClass('on'));
        $(this).addClass("on").siblings().removeClass("on")
            // console.log($(".kitchen-bot-right-con>ul").eq(index).show().siblings(".kitchen-bot-right-con>ul").hide());

        $(".kitchen-bot-right-con-five>ul").eq(index).addClass("kitchen-show").siblings("ul").removeClass("kitchen-show")
    })
    //随心购的轮播的两个按钮
      // 随心购的小圆点
       $(".app-show-bot-hd ul li").click(function() {    
        var weizhi = $(this).index() * -1200;    
        $(".app-tempWrap ul").animate({       left: $(this).index() * -1200     });    
        $(this).addClass('app-hd-on').siblings().removeClass('app-hd-on');  
    });
// 点击下一个开关--避免多次点击造成的bug
var flagNext = true;
$(".app-side-btn .side-btn-right").click(function() {
    // shownext();
    if (flagNext) {
        flagNext = false;
        $(".app-side-btn .side-btn-left").prop('disabled', false);
        $(".app-tempWrap ul").animate({
            left: "-=" + 1200
        }, function() {
            var aa = $(".app-tempWrap ul").position().left
            var bb = Math.ceil(aa / 1200) * -1;
            $('.app-show-bot-hd ul li').eq(bb).addClass('app-hd-on').siblings().removeClass('app-hd-on');
            if (Math.ceil(aa) == -2400) {
                $('.app-side-btn .side-btn-right').prop('disabled', true);
            };
            flagNext = true;
        });
    }
});
//点击上一个prev
var flagPrev = true;
$(".app-side-btn .side-btn-left").click(function() {
    // showprev();
    if (flagPrev) {
        flagPrev = false;
        $(".app-side-btn .side-btn-right").prop('disabled', false);
        $(".app-tempWrap ul").animate({
            left: "+=" + 1200
        }, function() {
            var aa = $(".app-tempWrap ul").position().left
            var bb = Math.ceil(aa / 1200) * -1;
            $('.app-show-bot-hd ul li').eq(bb).addClass('app-hd-on').siblings().removeClass('app-hd-on');
            if ($(".app-tempWrap ul").position().left == 0) {
                $(".app-side-btn .side-btn-left").prop('disabled', true);
            };
            flagPrev = true;
        });

    };
});




// 楼层导航
var appHot = document.querySelector(".app-hot");
var appNavigation = document.querySelector(".app-navigation");
var appFoot = document.querySelectorAll(".app-foot");
var appItem = document.querySelectorAll(".app-item");
console.log(appItem);
// 反到顶部
var navigationBar = document.querySelector("#navigation-bar8")

function appkillClass(ele) {
    for (var j = 0; j < ele.length; j++) {
        ele[j].style.backgroundColor = "#A3A0A1";
    }
};
// 给文档添加滚动事件
document.onscroll = function() {
    if (window.pageYOffset >= appHot.offsetTop) {
        appNavigation.style.display = "block";
    } else {
        appNavigation.style.display = "none";
    }
    for (var i = 0; i < appFoot.length; i++) {
        if (window.pageYOffset >= appFoot[i].offsetTop) {
            appkillClass(appItem);
            appItem[i].style.backgroundColor = "#2984EB";
        }
        // console.log(appItem[i].onclick);
        (function(i) {
            appItem[i].onclick = function() {
                // console.log(i);
                console.log(appFoot[i].offsetTop);
                console.log(window.pageYOffset);
                animationBackTop(window, appFoot[i].offsetTop);
            }
        })(i);

    }
    // 回到顶部
    navigationBar.onclick = function() {
        // window被卷进去的距离
        var winscroll = window.pageYOffset;

        var interId = setInterval(function() {
            winscroll -= 120;

            if (winscroll <= 0) {
                // 清除定时器
                clearInterval(interId)
            }

            window.scroll(0, winscroll);
        }, 30)
    }

}

function animationBackTop(ele, target) {
    // 进来就清除定时器
    clearInterval(ele.interId);
    ele.interId = setInterval(function() {
        // 等于目标时清除定时器
        if (Math.floor(ele.pageYOffset) == target) {
            clearInterval(ele.interId);
            // console.log(99999);
        } else {
            // console.log(target);
            // console.log(Math.floor(ele.pageYOffset));
            var dis = (target - Math.floor(ele.pageYOffset)) / 10;
            // 总结：记住---向左小于0,下取整，向右大于0，上取整
            dis = dis < 0 ? Math.floor(dis) : Math.ceil(dis);

            ele.scroll(0, ele.pageYOffset + dis);
        };
    }, 20);
};